<template>
    <view>
        <view class="banner" v-if="info.image">
            <swiper class="swiper" @change="change" :style="{ height: styleHeight + 'px' }"
                    :autoplay-disable-on-interaction="true" :indicator-dots="indicatorDots"
                    indicator-color="rgba(0, 0, 0, .1)" indicator-active-color="#FFC801" circular :autoplay="autoplay"
                    :interval="interval">
                <!--        && playState == 'play'-->
                <swiper-item class="image-wrapper" v-for="(item, index) in bannerList" :key="item">
                    <image ref="imgsdom" v-if="info" :src="item" mode="widthFix"></image>
                </swiper-item>
            </swiper>
            <!--      <view class="image-wrapper"> <image v-if="info" :src="info.image" mode="widthFix"></image></view>-->
        </view>
        <view class="content">
            <view class="product-type-box" :class="{ 'fixed-top': searchBarFixed == true }" id="product-type-box">
                <view class="type-item" v-for="(item, index) in typeInfo" :class="{ active: type_index == index }">
                    <view class="item-txt" @click="type_index = index">{{
                            item.name
                        }}
                    </view>
                </view>
                <scroll-view scroll-x class="nav-tabs-scroll">
                    <view class="secend-item" v-if="typeInfo.length > 0 && type_index == index"
                          v-for="(item, index) in typeInfo">
                        <text class="second-txt" v-for="(item_sec, index_sec) in item.value"
                              @click="type_sec_index = index_sec;isshaxin=true" :class="{ active: type_sec_index == index_sec }">
                            {{ item_sec.value_name }}
                        </text>
                    </view>
                </scroll-view>
            </view>
            <waterfall :col="col" :data="dataList" :gutterWidth="gutterWidth" :width="itemWidth">
                <template>
                    <div class="cell-item" v-for="(item, index) in dataList" @click="navTo(item)">
                        <view class="item-img" @click.stop="previewImage(item)">
                            <image v-if="item.product_image" :src="item.product_image" alt="加载错误" mode="widthFix">
                            </image>
                            <view class="address">
                                <view class="address-v">
                                    <view class="year-icon">
                                        <image src="../../../static/img/year.png" class="" mode=""></image>
                                    </view>
                                    <view class="year-name" v-if="item.serve_name != '全部'" style="margin-left: 10rpx">
                                        {{ item.serve_name }}
                                    </view>
                                    <view class="year-names" v-if="item.serve_name == '全部'" style="margin-left: 10rpx">
                                        {{ item.serve_name }}
                                    </view>
                                </view>
                                <view class="address-v">
                                    <view class="address-icon">
                                        <image src="../../../static/img/addresss.png" class="" mode=""></image>
                                    </view>
                                    <view class="address-name" style="margin-left: 10rpx">{{
                                            item.profession
                                        }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="item-txt u-p-l-12 u-p-r-12">
                            <law-product-intror-nopay2 :item="item"></law-product-intror-nopay2>
                            <!-- 服务保障 -->
                            <view class="item-tag text-ellipsis" style="    display: flex;">
                                <view class="tag-txt tag-txt-small" :class="small ? 'label-txt-anzhuo-small' : ''" v-for="(item_tag, index_tag) in item.tags" :key="index_tag" :style="{'margin-left':index_tag==0?'0rpx':(item.product_name=='打官司'&&!small?'-30rpx':'-40rpx')}">
                                    {{ item_tag }}
                                </view>
                            </view>
                            <!-- 价格 -->
                            <view class="item-money">
                                <view class="item-give" :class="String(item.product_money).indexOf('*') > 0||item.price_type=='先用后付 无忧付'||String(item.product_money).indexOf('(投资人支付') > 0||String(item.product_money).indexOf('+') > 0?'item-gives':''">
                                    <text v-if="(String(item.product_money).indexOf('*') > 0||item.price_type=='先用后付 无忧付')&& String(item.product_money).indexOf('(投资人支付') < 0" :style="
                      String(item.product_huaxian_money).indexOf('(') > 0 ||
                      String(item.product_huaxian_money).indexOf('随缘') > -1 ||
                      String(item.product_money).indexOf('*') > 0
                        ? 'margin-right: 0;display:block; position:relative'
                        : 'margin-right: 0;display:block; position:relative'
                    ">
                                        <text class="item-fuhao">¥</text>
                                        <block v-if="String(item.product_money).indexOf('*') > 0">
                                            <text class="item-yuanshi">{{ item.product_money.split("*")[0] }}</text>
                                            <text class="item-fq" style="top: 2rpx">x{{
                                                    item.product_money.split("*")[1]
                                                }}
                                            </text>
                                        </block>
                                        <block v-else>
                                            <text class="item-yuanshi">{{ item.product_money }}</text>
                                            <text class="textnormal item-fq tops_10" :style="small ?'top:2rpx':'top: 4rpx'" :class="small ? 'xia_as' : 'xia_bs'">
                                                (先用后付)
                                            </text>
                                        </block>
                                    </text>
                                    <view v-else-if="
                      String(item.product_money).indexOf('(投资人支付') > 0
                    " :style="
                      String(item.product_huaxian_money).indexOf('(') > 0 ||
                      String(item.product_huaxian_money).indexOf('随缘') > -1 ||
                      String(item.product_money).indexOf('*') > 0
                        ? 'margin-right: 0; position:relative'
                        : 'margin-right: 16rpx; position:relative'
                    ">

                                        <text class="item-fuhao">¥</text>
                                        <text class="item-yuanshi">{{
                                                item.product_money.split("(投资人支付")[0]
                                            }}
                                        </text>
                                        <text class="textnormal item-fq"
                                              :style="small ?'top: 6rpx;right:-26rpx':'top: 6rpx;right:-22rpx'"
                                              :class="small ?'xia_as' : 'xia_bs'">(投资人支付)
                                        </text>
                                    </view>
                                    <text v-else :style="
                      String(item.product_huaxian_money).indexOf('(') > 0 ||
                      String(item.product_huaxian_money).indexOf('随缘') > -1 ||
                      String(item.product_money).indexOf('*') > 0
                        ? 'margin-right: 0;display:block; position:relative'
                        : 'margin-right: 0;display:block; position:relative'
                    ">
                                        <text class="item-fuhao">¥</text>
                                        <text class="item-yuanshi">{{ item.product_money }}</text>
                                    </text>
                                    <template v-if="
                      item.product_huaxian_money &&
                      ((item.product_name == '问一下'&&item.serve_time!='15分钟')||item.product_name != '问一下') &&
                      item.offer != '47'
                    ">
                                        <text style="margin-left: 0; display: inline-block; position:relative"
                                              v-if="String(item.product_huaxian_money).indexOf('(') > 0"
                                              class="coupon-prize line_through">
                                            <text class="item-fq">{{
                                                    "¥" + String(item.product_huaxian_money).slice(
                                                        0,
                                                        String(item.product_huaxian_money).indexOf("(")
                                                    )
                                                }}
                                            </text>
                                            <text class="teshus item-fq" :style="small ? 'top:-2rpx':'top:-4rpx'" :class="small ? 'xia_a' : 'xia_b'">
                                                (投资人支付)
                                            </text>
                                        </text>
                                        <text style="margin-left: 0; position:relative" v-else-if="(String(item.product_huaxian_money).indexOf('*') > 0||item.price_type=='先用后付 无忧付')&& String(item.product_huaxian_money).indexOf('(投资人支付') < 0"
                                              class="coupon-prize line_through">
                                            <block v-if="String(item.product_huaxian_money).indexOf('*') > 0">
                                                <text class="item-fq">{{
                                                        "¥" + item.product_huaxian_money.split("*")[0]
                                                    }}
                                                </text>
                                                <text class="item-fq" :class="small ? 'xia_a' : 'xia_b'" :style="small ?'margin-right: 4rpx;top: 2rpx':'margin-right: 4rpx;top: 2rpx'">
                                                    x{{ item.product_huaxian_money.split("*")[1] }}
                                                </text>
                                            </block>
                                            <block v-else>
                                                <text class="item-fq">{{ "¥" + item.product_huaxian_money }}</text>
                                                <text class="tops_10 teshus item-fq" :class="small ? 'xia_a' : 'xia_b'" style="">
                                                    (先用后付)
                                                </text>
                                            </block>
                                        </text>
                                        <text style="margin-left: 0 ; position:relative" v-else class="coupon-prize line_through">
                                            {{ "¥" + item.product_huaxian_money }}
                                        </text>
                                    </template>
                                </view>
                                <view class="money-right gray">
                                    <view class="money-num">已售{{ item.sale }}</view>
                                </view>
                            </view>

                            <!-- 标题 -->
                            <!--						<view-->
                            <!--							class="item-title"-->
                            <!--							@click.stop="-->
                            <!--								item.isEllipsis = !item.isEllipsis;-->
                            <!--								copy(item);-->
                            <!--							"-->
                            <!--						>-->
                            <!--							<image class="title-image" src="@/static/img/product-title.png" mode="widthFix"></image>-->
                            <!--							<view class="title-txt" :class="{ 'txt-one-list': item.isEllipsis == true }">{{ item.title }}</view>-->
                            <!--							<view class="title-arrow" :class="{ rotate: item.isEllipsis == true }" v-if="item.title && item.title.replace(/[\u0391-\uFFE5]/g, 'aa').length > 14">-->
                            <!--								<image src="@/static/img/order-top-arrow.png" mode="aspectFit"></image>-->
                            <!--							</view>-->
                            <!--						</view>-->
                        </view>
                    </div>
                </template>
            </waterfall>
            <uni-load-more :status="loadingType" :contentText="{
          contentdown: '',
          contentrefresh: '正在加载...',
          contentnomore: '法力 守护美好生活',
        }"></uni-load-more>

            <!-- 全局通用组件 -->
            <law-common ref="lawCommon"></law-common>
        </view>
    </view>
</template>

<script>
import uniCopy from "@/common/utils/js_sdk/xb-copy/uni-copy.js";
import $ from "jquery";

export default {
    data() {
        return {
            requestTask      : null,
            info             : {},
            type_index       : 0,
            type_sec_index   : 0,
            typeInfo         : {},
            typeParams       : {},
            dataList         : [],
            col              : 2,
            page             : 1,
            loadingType      : "more", //加载更多状态
            searchBarFixed   : false,
            product_id       : "",
            autoplay         : true,
            playState        : "play",
            indicatorDots    : true,
            interval         : 5000,
            duration         : 800,
            styleHeight      : 186,
            bannerList       : [],
            product_name     : "",
            product_nameindex: "",
            pay_type         : "",
            pay_typeindex    : "",
            order            : "",
            orderindex       : "",
            server_id        : "",
            select_type      : "",
            server_idindex   : "",
            small            : false,
            isshaxin         : false
        };
    },
    onShow() {
        uni.removeStorageSync('forwardLocation')
        if (this.product_id) {
            if (localStorage.getItem('product_id') == this.product_id) {
                this.bannerList = JSON.parse(localStorage.getItem('bannerList'))
            }
        }
        if (this.server_id) {
            if (localStorage.getItem('server_id') == this.server_id) {
                this.bannerList = JSON.parse(localStorage.getItem('bannerList'))
            }
        }
        $(document.body).css({'background-color': '#fafcfa'})
    },
    created() {
        const nav = navigator.userAgent;
        if (nav.indexOf("Android") > -1 || nav.indexOf("Adr") > -1) {
            this.small = true;
        } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
            this.is_anzhuo = false;
        }
        if (this.small) {
            this.styleHeight = 186
        }
        this.gettopNewColor();
    },
    onLoad(params) {
        if (params.id) {
            this.product_id  = params.id;
            this.select_type = "product";
            // this.server_idindex =  params.id; // 从导航进入时点击领域的时候默认回显导航的值
            this.init();
        }
        if (params.server_id) {
            this.server_id   = params.server_id;
            this.select_type = "serve";
            // this.server_idindex =  params.server_id;// 从导航进入时点击领域的时候默认回显导航的值
            this.init();
        }
    },
    watch   : {
        type_index(val, oldVal) {
            if (val == "0") {
                if (this.product_nameindex) {
                    this.type_sec_index = this.product_nameindex;
                } else {
                    this.type_sec_index = 0;
                }
            } else if (val == "1") {
                if (this.pay_typeindex) {
                    this.type_sec_index = this.pay_typeindex;
                } else {
                    this.type_sec_index = 0;
                }
            } else if (val == "2") {
                if (this.orderindex) {
                    this.type_sec_index = this.orderindex;
                } else {
                    this.type_sec_index = 0;
                }
            } else if (val == "3") {
                if (this.server_idindex) {
                    this.type_sec_index = this.server_idindex;
                } else {
                    this.type_sec_index = 0;
                }
            }
            this.isshaxin = false
        },
        type_sec_index(val, oldVal) {
            if (this.type_index == "0") {
                this.product_nameindex = val;
                this.product_name      = this.typeInfo[0].value[val].id;
            } else if (this.type_index == "1") {
                this.pay_typeindex = val;
                this.pay_type      = this.typeInfo[1].value[val].id;
            } else if (this.type_index == "2") {
                this.orderindex = val;
                this.order      = this.typeInfo[2].value[val].id;
            } else if (this.type_index == "3") {
                this.server_idindex = val;
                if (this.select_type == "serve") {
                    this.product_id = this.typeInfo[3].value[val].id;
                } else {
                    this.server_id = this.typeInfo[3].value[val].id;
                }
            }
            console.log("========this.order", val, oldVal, this.type_index);
            this.typeParams = {
                product_name: this.product_name, //执业年限
                select_type : this.select_type, //筛选类型
                pay_type    : this.pay_type, //付款时间
                order       : this.order, //价格高低
                server_id   : this.server_id, //服务领域
                id          : this.product_id, //价格高低
            };
            // if (this.product_id) {
            // 	this.typeParams = {
            // 		...this.typeParams,
            // 		id: this.product_id,
            // 		server_id: this.server_id //服务领域
            // 	};
            // }
            if (this.server_id) {
                this.typeParams = {
                    ...this.typeParams,
                    // server_id: this.server_id,
                    // id: this.product_id,//服务领域
                    type: 2,
                };
                localStorage.setItem('server_id', this.server_id)
            }
            if (this.isshaxin) {
                this.loadData("refresh");
            }

        },
    },
    computed: {
        itemWidth() {
            return 345 * 0.5 * (document.documentElement.clientWidth / 375); //#rem布局 计算宽度
        },
        gutterWidth() {
            return 20 * 0.5 * (document.documentElement.clientWidth /
                375); //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
        },
    },
    onReady() {
        console.log("onReady");
        window.addEventListener("scroll", this.handleScroll);
    },
    onUnload() {
        console.log("onHide");
        // $(document.body).css({'background-color':'#f6f6f6'})
        // console.log("onHide", this.requestTask);
        // if (this.requestTask != null) {
        //     this.abortWrapper(this.requestTask)
        //     this.requestTask = null;
        // }
    },
    methods: {
        // abortWrapper(p1) {
        //     let abort
        //     const p2 = new Promise((resolve, reject) => (abort = reject))
        //     const p  = Promise.race([p1, p2])
        //     p.abort  = abort
        //     return p
        // },
        change() {
            this.playState = "puse";
        },
        getHeight() {
            setTimeout(() => {
                this.styleHeight = this.$refs.imgsdom[0].$el.clientHeight;
            }, 500)
        },
        async init() {
            let formData = {};
            if (this.product_id) {
                formData = {
                    product_id: this.product_id,
                };
            }
            if (this.server_id) {
                formData = {
                    server_id: this.server_id,
                };
            }
            let res             = await this.$api("index.selects", formData);
            this.typeInfo       = res.data;
            this.type_sec_index = 0;
            this.typeParams     = {
                select_type : this.select_type, //筛选类型
                product_name: this.typeInfo[0].value[0].id, //执业年限
                pay_type    : this.typeInfo[1].value[0].id, //付款时间
                order       : this.typeInfo[2].value[0].id, //价格高低
            };
            if (this.product_id) {
                this.typeParams = {
                    ...this.typeParams,
                    id: this.product_id,
                    // server_id:this.product_id //修改的  有问题 因为index值和分类里面的具体个数对不上。
                    // server_id: this.typeInfo[3].value[0].id//之前的
                };
            }
            if (this.server_id) {
                this.typeParams = {
                    ...this.typeParams,
                    server_id: this.server_id,
                    // id:  this.typeInfo[3].value[0].id,//之前的
                    // id:this.server_id,//修改的  有问题 因为index值和分类里面的具体个数对不上。
                    type: 2,
                };
            }
            console.log("========this.server_id", this.typeInfo[3], this.typeInfo);
            this.loadData("refresh");
        },
        //带下拉刷新和上滑加载
        async loadData(type = "add", loading) {
            var that = this
            if (type === "add") {
                if (that.loadingType === "nomore") {
                    return;
                }
                that.loadingType = "loading";
            } else if (type === "refresh") {
                that.loadingType = "loading";
                that.page        = 1;
                that.dataList    = [];
            } else {
                that.loadingType = "more";
            }

            let formData     = {
                page: that.page,
                ...that.typeParams,
            };
            // this.requestTask = that.$api("index.product", formData)
            let res          = await that.$api("index.product", formData)
            if (res.code == 1) {
                if (that.page == 1) {
                    that.info = res.data;
                    uni.setNavigationBarTitle({
                        title: res.data.title,
                    });
                }
                let dataList = res.data.server.server;
                dataList.forEach((item) => {
                    that.$set(item, "isEllipsis", true);
                });

                that.page++;
                that.dataList    = that.dataList.concat(dataList);
                that.loadingType =
                    res.data.server.current_page >= res.data.server.total_page ?
                        "nomore" :
                        "more";
                if (this.server_id && localStorage.getItem('server_id') != that.server_id) {
                    that.bannerList = res.data.banner_list;
                }
                if (this.product_id && localStorage.getItem('product_id') != that.product_id) {
                    that.bannerList = res.data.banner_list;
                }
                this.getHeight();
                localStorage.setItem('product_id', that.product_id);
                localStorage.setItem('bannerList', JSON.stringify(res.data.banner_list))
            }
        },
        navTo(item) {
            let url = "";

            let params = {
                product_id      : item.product_price_id,
                product_name    : item.product_name,
                area_id         : item.id,
                product_image   : JSON.stringify(this.bannerList),
                sale            : item.sale,
                serve_name_text : item.serve_name_text,
                price_type_text : item.price_type,
                product_price_id: item.product_price_id,
            };
            /* if(item.money_type_text=='投资人支付(不用还)'){
              if(item.profession == '深圳'){
                item.profession = '广东省深圳市';
              }else{
                item.profession = '广东省广州市';
              }
              params = {
                ...params,
                profession2: item.profession
              };
            } */
            if (item.product_name == "问一下") {
                url = "/pages/client/order/order-ask";
            } else if (item.product_name == "写合同") {
                url = "/pages/client/order/order-write";
            } else if (item.product_name == "陪同办") {
                url = "/pages/client/order/order-chat";
            } else if (item.product_name == "私人律师") {
                url = "/pages/client/order/order-butler";
            } else if (item.product_name == "审案子") {
                url = "/pages/client/order/order-decide";
            } else if (item.product_name == "打官司") {
                if (item.money_type == 26) {
                    params = {
                        ...params,
                        bearFees: "投资人支付(不用还)",
                    };
                } else if (item.money_type == 27) {
                    params = {
                        ...params,
                        bearFees: "自费",
                    };
                }
                url = "/pages/client/order/order-court-own";
            } else if (item.product_name == "刑事会见") {
                url = "/pages/client/order/order-criminal";
            }
            this.jump(url, params);
        },
        previewImage(item) {
            let previewImages = [];
            let obj           = {
                userId  : "1234",
                headIcon: "",
                nickname: "风骚女子",
                picURL  : item.product_image_max,
                content : item.title,
            };
            previewImages.push(obj);
            this.newPreviewImages(previewImages);
        },
        copy(item) {
            if (!item.isEllipsis) {
                return;
            }
            let copyInfo = item.title;
            uniCopy({
                content: copyInfo,
                success: (res) => {
                    uni.showToast({
                        title: res,
                        icon : "none",
                    });
                },
                error  : (e) => {
                    uni.showToast({
                        title   : e,
                        icon    : "none",
                        duration: 3000,
                    });
                },
            });
        },
        handleScroll() {
            console.log("scroll");
            var scrollTop =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
            if (document.querySelector("#product-type-box")) {
                var offsetTop = document.querySelector("#product-type-box").offsetTop;
                if (scrollTop > offsetTop) {
                    this.searchBarFixed = true;
                } else {
                    this.searchBarFixed = false;
                }
            }
        },
        gettopNewColor() {
            const nav = navigator.userAgent;
            if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
                phone.HomeMainPageBackgroundColorChange("#fafcfa")
            } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
                this.$bridge.callhandler('HomeMainPageBackgroundColorChange', {
                    topColor   : '#fafcfa',
                    bottomColor: "#fafcfa"
                }, res => {
                });
            }
        },
    },
    //加载更多
    onReachBottom() {
        this.loadData();
    },
};
</script>

<style lang="scss">
page {
    background: #fafafa;
}

.content {
    padding: 20rpx 20rpx 0;
    -webkit-text-size-adjust: none;
}

// 瀑布流
::v-deep .vue-waterfall-column {
    float: left;
}

.cell-item {
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 20rpx;
}

.item-img {
    height: 400rpx;
    overflow: hidden;
    position: relative;

    image {
        width: 100%;
        height: 100%;
    }
}

.item-txt {
    padding: 0 12rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;

    .item-money {
        //margin: 0 0 14rpx 0;
        display: flex;
        display: box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: flex-end;

        .money-right {
            // min-width: 100rpx;
            display: flex;
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            align-items: center;

            image {
                width: 30rpx;
                height: 30rpx;
            }

            .money-num {
                font-size: 20rpx;
                margin-left: 6rpx;
                min-width: 100rpx;
                text-align: right;
            }
        }
    }

    .item-title {
        padding-top: 4rpx;
        display: flex;

        .title-image {
            margin-top: 4rpx;
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }

        .title-txt {
            color: #aaa;
            font-size: 20rpx;
            flex: 1;
            line-height: 50rpx;
        }

        .title-arrow {
            padding-left: 10rpx;
            width: 26rpx;
            height: 50rpx;
            display: flex;
            align-items: center;

            image {
                width: 100%;
            }

            &.rotate {
                image {
                    transform: rotate(180deg);
                }
            }
        }
    }

    .item-tip {
        //font-size: 24rpx;
        margin-bottom: 10rpx;

        .tip-item {
            margin-right: 10rpx;
        }
    }

    .item-tag {
        //margin-bottom: 4rpx;
        &.text-ellipsis {
            color: #aaa;
        }

        .tag-txt {
            color: #aaa;
            font-size: 28rpx;
        }

        .tag-txt-small {
            color: #333;
            transform: scale(0.75);
            transform-origin: 0 0;
            margin-left: -40rpx;

            &:first-child {
                margin-left: 0rpx;
            }
        }

        .label-txt-anzhuo-small {
            font-size: 28rpx;
            transform: scale(0.7) !important;
            transform-origin: 0 0;
        }
    }

    .item-give {
        color: #FF7521;
        font-size: 28rpx;
        font-weight: bold;
        width: 60%;
    }

    .item-gives {
        display: flex;
        flex-direction: column;
    }

    .item-fuhao {
        font-size: 24rpx;
    }

    .item-fq {
        font-size: 22rpx;
        margin-right: 4rpx;
    }

    .item-yuanshi {
        font-size: 30rpx;
        margin-right: 6rpx;
    }
}

.txt-one-list {
    height: 50rpx;
    overflow: hidden;
}

.banner {
    .image-wrapper {
        width: 100%;
        overflow: hidden;

        image {
            width: 100%;
            display: block;
        }
    }
}

.product-type-box {
    background-color: #fafafa;
    margin-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;

    .type-item {
        flex: 1;

        .item-txt {
            color: #333;
            font-size: 34rpx;
            position: relative;
            line-height: 50rpx;
            text-align: center;
            font-weight: bold;
        }

        &.active {
            .item-txt {
                color: $uni-color-primary;

                &::before {
                    content: "";
                    position: absolute;
                    background-color: $uni-color-primary;
                    width: 50rpx;
                    height: 8rpx;
                    border-radius: 8rpx;
                    bottom: -10rpx;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
        }
    }

    .secend-item {
        white-space: nowrap;
        margin-top: 20rpx;
        padding-bottom: 10rpx;

        .second-txt {
            display: inline-block;
            margin-right: 15rpx;
            background-color: #ffffff;
            border-radius: 10rpx;
            text-align: center;
            padding: 10rpx;
            color: #aaaaaa;
            border: 1rpx solid #ffffff;

            &.active {
                color: $uni-color-primary;
                border: 1rpx solid $uni-color-primary;
            }
        }
    }
}

.fixed-top.product-type-box {
    width: 100%;
    position: fixed;
    top: 84rpx;
    left: 0;
    z-index: 999;
    padding: 20rpx;
}

.address {
    width: 346rpx;
    height: 42rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16rpx;
    padding-right: 16rpx;
    position: absolute;
    bottom: 0rpx;
    left: 0rpx;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.address-v {
    width: 90rpx;
    height: 42rpx;
    display: flex;
    align-items: center;
}

.year-icon {
    width: 29rpx;
    height: 29rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.year-icon image {
    width: 100%;
    height: 100%;
}

.year-name {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 42rpx;
}

.year-names {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 42rpx;
}

.address-icon {
    width: 20rpx;
    height: 29rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-icon image {
    width: 100%;
    height: 100%;
}

.address-name {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 42rpx;
}

//.swiper {
//	border-radius: 8px;
//}

.line_through {
    text-decoration: line-through;
    font-weight: normal;
    color: #aaa;
    font-size: 22rpx;
}

.xia_a {
    white-space: nowrap;
    position: absolute;
    margin-left: -6rpx;
    margin-bottom: -10rpx;
    text-decoration: line-through;
    -webkit-transform: scale(0.75) !important;
    transform: scale(0.75) !important;
}

.xia_b {
    white-space: nowrap;
    position: absolute;
    // margin-top: -30rpx;
    margin-left: -6rpx;
    margin-bottom: -10rpx;
    // margin-right: 20rpx;
    text-decoration: line-through;
    // font-size: 4rpx;
    transform: scale(0.8) !important;
}

.xia_as {
    white-space: nowrap;
    position: absolute;
    margin-left: -6rpx;
    margin-bottom: -10rpx;
    text-decoration: line-through;
    -webkit-transform: scale(0.82) !important;
    transform: scale(0.82) !important;
}

.xia_bs {
    white-space: nowrap;
    position: absolute;
    // margin-top: -30rpx;
    margin-left: -6rpx;
    margin-bottom: -10rpx;
    // margin-right: 20rpx;
    text-decoration: line-through;
    // font-size: 4rpx;
    transform: scale(0.9) !important;
}

.teshus {
    font-size: 26rpx;
    margin-top: 4rpx;
}

.tops_10 {
    margin-top: 2rpx;
}

.textnormal {
    text-decoration: none !important;
    font-size: 26rpx;
}

.item-img uni-image {
    width: 100%;
    height: 100% !important;
}

::v-deep .uni-page-head {
    background: #fafafa !important;
}

::v-deep .uni-scroll-view::-webkit-scrollbar {
    height: 0 !important;
}

::v-deep .uni-scroll-view::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: none !important;
}
</style>
